
"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Parallax =
/*#__PURE__*/
function () {
  function Parallax(option) {
    _classCallCheck(this, Parallax);

    this._img = null;
    this._scrollBox = null;
    this._initYPos = 0;
    this.setting = Object.assign(this.defaultOption, option);
  }

  _createClass(Parallax, [{
    key: "init",
    value: function init() {
      this.setWindowSize();
      this.container = this.setting.container;
      this.scrollBox = this.setting.scrollBox;
      this.initYPosPer = this.setting.initYPosPer;
      this.parallaxDom = $(this.setting.parallaxDom, this.container)[0];
      this.img = $(this.parallaxDom).find("img")[0];
      this.setting.initDone();
    }
  }, {
    key: "animate",
    value: function animate() {
      var _this$container$getBo = this.container.getBoundingClientRect(),
          top = _this$container$getBo.top,
          bottom = _this$container$getBo.bottom,
          height = _this$container$getBo.height,
          width = _this$container$getBo.width;

      var percentage = (this.windowSize.height + height - (top + height)) / (this.windowSize.height + height);
      percentage = Math.min(1, Math.max(0, percentage));
      if (percentage === 0 || percentage === 1) return false;
      $(this.parallaxDom).css("transform", "translate3d(0, ".concat(this.initYPos * this.setting.rotate - percentage * this.initYPos * this.setting.rotate, "px, 0)"));
    }
  }, {
    key: "setWindowSize",
    value: function setWindowSize() {
      var _this = this;

      this.windowSize = {
        height: window.innerHeight,
        width: window.innerWidth
      };
      $(window).on("resize.parallax", function () {
        _this.windowSize = {
          height: window.innerHeight,
          width: window.innerWidth
        };
        _this.initYPos = _this.initYPosPer * $(_this.parallaxDom).width();
      });
    }
  }, {
    key: "initYPos",
    get: function get() {
      return this._initYPos;
    },
    set: function set(value) {
      this._initYPos = Math.max(-$(this.parallaxDom).height(), value);
      this.animate();
    }
  }, {
    key: "defaultOption",
    get: function get() {
      var _this2 = this;

      return {
        scrollBox: "body",
        initYPosPer: -0.25,
        rotate: 1.1,
        parallaxDom: ".parallax",
        initDone: function initDone() {
          console.log("initDone");
          _this2.initYPos = -0.25 * $(_this2.parallaxDom).width();
        },
        imgLoaded: function imgLoaded() {
          console.log("image_loaded");
        },
        scrolling: function scrolling() {// console.log("scrolling");
        }
      };
    }
  }, {
    key: "scrollBox",
    get: function get() {
      return this._scrollBox;
    },
    set: function set(value) {
      var _this3 = this;

      $(this._scrollBox).off("scroll.parallax");
      this._scrollBox = value;
      $(this._scrollBox).on("scroll.parallax", function () {
        requestAnimationFrame(function () {
          _this3.animate();
        });

        _this3.setting.scrolling();
      });
    }
  }, {
    key: "img",
    get: function get() {
      return this._img;
    },
    set: function set(value) {
      var _this4 = this;

      if (!value) return false;
      this._img = value;

      if (this.constructor.isImageLoaded(value)) {
        this.setting.imgLoaded();
      } else {
        $(this._img).one("load", function () {
          _this4.setting.imgLoaded();
        });
      }
    }
  }], [{
    key: "isImageLoaded",
    value: function isImageLoaded(image) {
      // check if image is set as the parameter
      if (!image) {
        return false;
      } // check if image has been 100% loaded


      if (!image.complete) {
        return false;
      } // check if the image is displayed


      if (typeof image.naturalWidth !== "undefined" && image.naturalWidth === 0) {
        return false;
      }

      return true;
    }
  }]);

  return Parallax;
}();
